<template>
  <div class="container">
    <view class="data_section">
      <picker mode="date" :value="date" start="2000-01-01" end="2066-09-01" @change="bindDateChange">
        <view class="picker">{{date}}</view>
      </picker>
      <span class="bottom_arrow"></span>
    </view>
    <!-- <scroll-view :scroll-y="true" :style="{height: scrollHeight +'px'}" @scrolltoupper="refresh"> -->
    <ul class="attend_ul">
      <li class="flex" v-for="item in attendanceList" :key="item.id" @tap="attendclick(item.id, item.shenhe, item.type)" v-if="item.isdisable === 0">
        <div class="attend_left flex-item flex">
          <span class="name_pic">
            <img :src="item.headurl || '/static/imgs/system_user.png'" alt>
          </span>
          <div class="attend_details flex-item">
            <span class="name">{{item.name}}</span>
            <span class="time_words" v-if="item.type != 0">签到时间：{{item.time_start}}</span>
            <span class="time_words" v-else>签到时间：无</span>
            <span class="time_words" v-if="item.type == 4">签退时间：{{item.time_end == 0 ? '无' : item.time_end}}</span>
            <span class="time_words" v-else>签退时间：无</span>
          </div>
        </div>
        <div class="attend_status flex" v-if="item.type == 0">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#a2a1a1">缺勤</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 1">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fc97af">出勤</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 2">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#96dee8">请假</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 3">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#72ccff">休息</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 4">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fc97af">出勤</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 5">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#fbc171">调休</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 6">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#04ee67">加班</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
        <div class="attend_status flex" v-if="item.type == 7">
          <div class="attend_right flex-item" style="color:#FFFFFF;background-color:#04ee67">加班</div>
          <div v-if="item.shenhe == 0" class="attend_right flex-item" style="background-color:#ea78aa">未审核</div>
          <div v-else class="attend_right flex-item cur">已审核</div>
        </div>
      </li>
    </ul>
    <!-- </scroll-view> -->
    <!-- 审核弹窗start -->
    <div class="mask" v-if="showattend" @tap="clossepop"></div>
    <section class="attend_pop" v-if="showattend" :class="{heightauto : work.shenhe}">
      <ul class="pop_details" v-if="!work.shenhe">
        <li class="flex">
          <div class="user_pic">
            <img :src="user.headurl || '/static/imgs/system_user.png'" alt>
          </div>
          <div class="flex-item attend_info">
            <span>姓名：{{user.name}}</span>
            <span v-if="work.type != 0">签到时间：{{work.time_start}}</span>
            <span v-else>签到时间：无</span>
            <span v-if="work.type == 4">签退时间：{{work.time_end}}</span>
            <span v-else>签退时间：无</span>
            <span>签退地址：{{work.address}}</span>
          </div>
        </li>
        <li>
          <span class="title">审核状态：</span>
          <span class="status">{{work.shenhe ? '已审核' : '未审核'}}</span>
        </li>
        <li v-if="!work.reportforms">
          <span class="title">填写报表：</span>
          <span class="status">未填写</span>
        </li>
        <li v-if="work.reportforms" @tap="reportforms(work.userid)">
          <span class="title">填写报表：</span>
          <span class="status">已填写（点击查看）</span>
        </li>
        <li class="flex">
          <span class="title attend_words">出勤状态：</span>
          <div class="attend_list flex-item">
            <span class="choose_attend" :class="attendType == 4 ? 'cur' : ''" data-type="4" @tap.stop="chooseattend" data-label="4">出勤</span>
            <span class="choose_attend" :class="attendType == 0 ? 'cur' : ''" data-type="0" @tap.stop="chooseattend" data-label="0">缺勤</span>
            <span class="choose_attend" :class="attendType == 7 ? 'cur' : ''" data-type="7" @tap.stop="chooseattend" data-label="7">加班</span>
            <span class="choose_attend" :class="attendType == 5 ? 'cur' : ''" data-type="5" @tap.stop="chooseattend" data-label="5">调休</span>
            <span class="choose_attend" :class="attendType == 3 ? 'cur' : ''" data-type="3" @tap.stop="chooseattend" data-label="3">休息</span>
            <span class="choose_attend" :class="attendType == 2 ? 'cur' : ''" data-type="2" @tap.stop="chooseattend" data-label="2">请假</span>
          </div>
        </li>
        <li>
          <span class="title">审核内容</span>
        </li>
        <li class="flex" v-if="worktype == 0">
          <span class="title">扣除工资：</span>
          <input type="digit" placeholder="扣除工资数目" v-model="del_money" class="flex-item status">
        </li>
        <li class="flex" v-if="worktype == 7">
          <span class="title">增加调休：</span>
          <picker @change="bindaddrestChange" v-model="add_rest" :range="dayArray" class="flex-item">
            <view class="picker">{{add_rest}}天</view>
          </picker>
        </li>
        <li class="flex" v-if="worktype == 7">
          <span class="title">加班费：</span>
          <input type="digit" placeholder="增加工资数目" v-model="add_money" class="flex-item status">
        </li>
        <li class="flex" v-if="worktype == 5">
          <span class="title">减少调休：</span>
          <picker @change="binddelrestChange" v-model="del_rest" :range="dayArray" class="flex-item">
            <view class="picker">{{del_rest}}天</view>
          </picker>
        </li>
        <li class="flex" v-if="worktype == 2">
          <span class="title">扣除工资：</span>
          <input type="digit" placeholder="扣除工资数目" v-model="del_money" class="flex-item status">
        </li>
        <li class="flex">
          <span class="title remark_words">添加备注：</span>
          <textarea class="remark flex-item" placeholder="请填写备注内容（可不填）" v-model="remark"></textarea>
        </li>
        <li>
          <button class="attend_btn" @tap="attendData">审核</button>
        </li>
      </ul>

      <ul class="pop_details" v-if="work.shenhe">
        <li>
          <span class="title">姓名：</span>
          <span class="status">{{user.name}}</span>
        </li>
        <li>
          <span class="title">签到时间：</span>
          <span class="status">{{work.time_start}}</span>
        </li>
        <li>
          <span class="title">签退时间：</span>
          <span class="status">{{work.time_end === 0 ? '无' : work.time_end}}</span>
        </li>
        <li>
          <span class="title" v-if="work.address">签到地址：</span>
          <span class="status">{{work.address}}</span>
        </li>
        <li>
          <span class="title">审核状态：</span>
          <span class="status" style="color:#ff4444;">{{work.shenhe ? '已审核' : '未审核'}}</span>
        </li>
        <li>
          <span class="title">审核时间：</span>
          <span class="status">{{work.shenhe_time}}</span>
        </li>
        <li>
          <span class="title">审核人：</span>
          <span class="status">{{work.shenhe_name}}</span>
        </li>
        <li>
          <span class="title">审核备注：</span>
          <span class="status">{{work.remark ? work.remark : '无'}}</span>
        </li>
        <li>
          <span class="title">审核操作：</span>
          <span class="status">{{work.shenhe_jilu ? work.shenhe_jilu : '无'}}</span>
        </li>
      </ul>
    </section>
    <!-- 审核弹窗end -->
    <!-- 查看报表弹窗start -->
    <div class="mask" v-if="showreport" @tap="clossereport" style="z-index:3;"></div>
    <section class="reportform" v-if="showreport">
      <div class>报表内容：</div>
      <textarea class="reportform_textarea" placeholder="填写报表" name="textarea" focus="true" v-model="reportform" disabled="false" />
      </section>
    <!-- 查看报表弹窗end -->
    <Loading v-if="showLoading"></Loading>
  </div>
</template>

<script>
import api from '@/utils/api'
import wx from 'wx'
import Toast from '@/utils/toast'
import moment from 'moment'
import Loading from '@/components/loading'
export default {
  data () {
    return {
      date: '2018-10-24',
      attendType: 4,
      showattend: false,
      attendanceList: [],
      warnmsg: '',
      scrollHeight: 0,
      user: '',
      work: '',
      worktype: '4',
      add_money: 0,
      del_money: 0,
      add_rest: 0,
      del_rest: 0,
      remark: '',
      imgsize: '?imageView/1/w/120/h/120',
      workid: '',
      dayArray: ['0天', '0.5天', '1天'],
      workuserId: 0,
      showreport: false,
      reportform: '',
      showLoading: false
    }
  },

  components: {
    Loading
  },
  async onShow () {
    let that = this;
    wx.getSystemInfo({
      success (res) {
        console.log(res.windowHeight)
        that.scrollHeight = res.windowHeight - 40
      }
    })
    let year = new Date().getFullYear();
    let month = new Date().getMonth() + 1;
    let day = new Date().getDate();
    let time = year + '-' + month + '-' + day;
    this.date = time;
    await Promise.all([
      this.getuserkaoqinlist()
    ])
  },
  methods: {
    async getuserkaoqinlist () {
      this.showLoading = true
      let floor = wx.getStorageSync('userInfo').floor;
      let departmentid = wx.getStorageSync('userInfo').jsonshop;
      let startTimejs = moment(this.date, 'YYYY-MM-DD').unix();
      let endTimejs = startTimejs + 86400;
      // let ismanage = wx.getStorageSync('userInfo').ismanage;
      let res = await api.getuserkaoqinlist({ departmentid: departmentid, floor: floor, start_time_js: startTimejs, end_time_js: endTimejs });
      console.log(res)
      if (res.code === '100') {
        res.data.forEach(item => {
          if (item.time_end != 0) {// eslint-disable-line
            item.time_end = moment.unix(item.time_end).format('HH:mm:ss A');
          }
          if (item.time_start != 0) {// eslint-disable-line
            item.time_start = moment.unix(item.time_start).format('HH:mm:ss A');
          }
        });
        console.log(res.data)
        this.attendanceList = res.data
        this.showLoading = false
      } else {
        this.warnmsg = '没有员工数据，请添加数据！';
        this.showLoading = false
      }
    },
    async getPopinfo (userId) {
      this.work = '';
      this.workid = '';
      this.remark = '';
      this.del_rest = 0;
      this.add_rest = 0;
      this.add_money = 0;
      this.del_money = 0;
      let startTimejs = moment(this.date, 'YYYY-MM-DD').unix();
      let endTimejs = startTimejs + 86400;
      let ret = await api.getuserthisdayworkinfo({ user_id: userId, start_time_js: startTimejs, end_time_js: endTimejs });
      if (ret.code === '100') {
        this.user = ret.user[0];
        if (ret.work.length === 0) {
          this.work = {
            'type': 0
          };
        } else {
          console.log(ret.work[0])
          this.work = ret.work[0];
          this.workid = ret.work[0].id;
          console.log(this.workid)
          this.work.shenhe_time = moment.unix(this.work.shenhe_time).format('HH:mm:ss A');
          this.work.time_start = moment.unix(this.work.time_start).format('HH:mm:ss A');
          console.log(this.work.time_end)
          if (this.work.time_end === 0) { // eslint-disable-line
            this.work.time_end = 0;
          }
          if (this.work.time_end !== 0) { // eslint-disable-line
            this.work.time_end = moment.unix(this.work.time_end).format('HH:mm:ss A');
          }
        }
        if (this.work.type === 1) {
          this.worktype = 4;
        }
        if (this.work.type === 6) {
          this.worktype = 7;
        }
        if (this.work.type !== 6 && this.work.type !== 1) {
          this.worktype = this.work.type
        }
        this.showattend = true
      } else {
        Toast(ret.msg);
      }
    },
    bindDateChange (e) {
      let startTimejs = moment(e.mp.detail.value, 'YYYY-MM-DD').unix();
      if (startTimejs > Math.round(Date.now() / 1000)) {
        Toast('不能选择大于今天的时间', 'noicon');
        return false;
      }
      this.date = e.mp.detail.value;
      this.getuserkaoqinlist();
    },
    bindaddrestChange (e) {
      if (e.mp.detail.value === '0') {
        this.add_rest = 0
      }
      if (e.mp.detail.value === '1') {
        this.add_rest = 0.5
      }
      if (e.mp.detail.value === '2') {
        this.add_rest = 1
      }
    },
    binddelrestChange (e) {
      if (e.mp.detail.value === '0') {
        this.del_rest = 0
      }
      if (e.mp.detail.value === '1') {
        this.del_rest = 0.5
      }
      if (e.mp.detail.value === '2') {
        this.del_rest = 1
      }
    },
    chooseattend (e) {
      this.attendType = e.mp.currentTarget.dataset.type;
      console.log(e.mp.currentTarget.dataset)
      this.worktype = e.mp.currentTarget.dataset.label
    },
    attendclick (userId, shenhe, type) {
      this.attendType = type
      this.workuserId = userId
      this.worktype = type
      this.getPopinfo(userId)
    },
    async attendData () {
      if (this.worktype == 0) { // eslint-disable-line
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        let price = this.del_money;
        if (reg.test(price)) {
        } else {
          Toast('填写扣除金额有误！', 'noicon')
          this.del_money = 0;
          return false;
        };
      }
      if (this.worktype == 4) { // eslint-disable-line
        // do nothing
      }
      if (this.worktype == 7) {// eslint-disable-line
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        let price = this.add_money;
        if (reg.test(price)) {
        } else {
          Toast('填写加班费有误！', 'noicon')
          this.add_money = 0;
          return false;
        };
      }
      if (this.worktype == 2) {// eslint-disable-line
        let reg = /(^[1-9]([0-9]+)?(\.[0-9]{1,2})?$)|(^(0){1}$)|(^[0-9]\.[0-9]([0-9])?$)/;
        let price = this.del_money;
        if (reg.test(price)) {
        } else {
          Toast('填写扣除金额有误！', 'noicon')
          this.del_money = 0;
          return false;
        };
      }
      if (this.worktype == 3) {// eslint-disable-line
        // do nothing
      }
      if (this.worktype == 5) {// eslint-disable-line
        // do nothing
      }
      let startTimejs = moment(this.date, 'YYYY-MM-DD').unix();
      let name = wx.getStorageSync('userInfo').user_name;
      let type = this.worktype;
      let delMoney = this.del_money;
      let addMoney = this.add_money;
      let remark = this.remark;
      let date = this.date;
      let workid = this.workid;
      let addRest = this.add_rest;
      let delRest = this.del_rest;
      let ret = await api.postusershenhework({ user_id: this.workuserId, start_time_js: startTimejs, type: type, del_money: delMoney, add_money: addMoney, remark: remark, date: date, name: name, workid: workid, add_rest: addRest, del_rest: delRest });
      if (ret) {
        if (ret.code === '100') {
          Toast(ret.msg)
          this.clossepop()
          this.getuserkaoqinlist()
        } else {
          Toast(ret.msg)
        }
      }
    },
    clossepop () {
      this.showattend = false
    },
    async reportforms (userId) {
      this.showreport = true
      let startTimejs = moment(this.date, 'YYYY-MM-DD').unix();
      let endTimejs = startTimejs + 86400;
      let ret = await api.getuserthisdayworkinfo({ user_id: userId, start_time_js: startTimejs, end_time_js: endTimejs });
      console.log(ret)
      if (ret.code === '100') {
        this.reportform = ret.work[0].reportforms
      }
    },
    clossereport () {
      this.showreport = false
    },
    refresh () {
      this.getuserkaoqinlist();
    }
  },
  async onPullDownRefresh () {
    // 请求数据
    await Promise.all([
      this.getuserkaoqinlist()
    ])
    wx.stopPullDownRefresh()
  },
  created () {
  }
}
</script>

<style scoped>
.container {
  background: #fff !important;
}
.data_section {
  padding-right: 36rpx;
  width: 252rpx;
  margin: 0 auto;
  border-radius: 32rpx;
  background: #ff4444;
  color: #fff;
  line-height: 60rpx;
  text-align: center;
  margin-top: 30rpx;
  position: relative;
  box-sizing: border-box;
}
.bottom_arrow {
  position: absolute;
  right: 30rpx;
  top: 24rpx;
  width: 30rpx;
  height: 16rpx;
  background: url(http://mytimg.178mr.com/bottom_arrow.png) no-repeat;
  background-size: 100%;
}
.attend_ul {
  width: 100%;
}
.attend_ul li {
  width: 100%;
  padding: 27rpx 30rpx 13rpx 32rpx;
  position: relative;
}
.attend_ul li::after {
  position: absolute;
  content: "";
  width: 95%;
  left: 33rpx;
  bottom: 0;
  height: 2rpx;
  background: RGBA(153, 153, 153, 0.1);
}
.attend_ul li .attend_left .name_pic {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  /* border: 4rpx solid #ff4444; */
}
.attend_ul li .attend_left .name_pic img {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
}
.attend_ul li .attend_left .attend_details {
  margin-left: 20rpx;
}
.attend_ul li .attend_left .attend_details span {
  display: block;
}
.attend_ul li .attend_left .attend_details .name {
  font-size: 32rpx;
  font-weight: 400;
  line-height: 52rpx;
  color: rgba(51, 51, 51, 1);
}
.attend_ul li .attend_left .attend_details .time_words {
  font-size: 24rpx;
  font-weight: 400;
  line-height: 40rpx;
  color: rgba(153, 153, 153, 1);
}
.attend_ul li .attend_right {
  width: 104rpx;
  height: 40rpx;
  background: RGBA(153, 153, 153, 0.5);
  color: #fff;
  font-size: 28rpx;
  text-align: center;
  line-height: 40rpx;
  border-radius: 24rpx;
  box-shadow: 0px 3rpx 6rpx rgba(0, 0, 0, 0.16);
  margin-right: 10rpx;
}
.attend_ul li .attend_right:last-child {
  margin-right: 0;
}
.attend_ul li .attend_right.cur {
  background: #ff4444;
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.attend_pop {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 624rpx;
  height: 980rpx;
  background: RGBA(255, 255, 255, 1);
  border-radius: 24rpx;
  z-index: 2;
  padding: 40rpx;
}
.pop_details li {
  margin-bottom: 10rpx;
}
.pop_details li .title {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
}
.pop_details li .status {
  font-size: 32rpx;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
}
.pop_details li .user_pic {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.pop_details li .user_pic img {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}
.attend_list .choose_attend {
  display: inline-block;
  margin-right: 68rpx;
  width: 68rpx;
  height: 68rpx;
  line-height: 68rpx;
  font-size: 28rpx;
  color: rgba(51, 51, 51, 1);
  text-align: center;
  margin-bottom: 20rpx;
  box-sizing: border-box;
}
.attend_list .choose_attend.cur {
  border: 2rpx solid RGBA(255, 68, 68, 1);
  color: #ff4444;
  border-radius: 68rpx;
}
.attend_list .choose_attend:nth-child(3),
.attend_list .choose_attend:last-child {
  margin-right: 0;
}
.attend_words {
  position: relative;
  top: -54rpx;
}
.remark_words {
  position: relative;
  top: -35rpx;
}
.attend_pop .remark {
  height: 100rpx;
  font-size: 28rpx;
}
.attend_btn {
  width: 280rpx;
  height: 80rpx;
  margin: 0 auto;
  background: #ff4444;
  box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
  text-align: center;
  line-height: 80rpx;
  font-size: 36rpx;
  color: #fff;
  border-radius: 50rpx;
}
.picker {
  font-size: 14px;
}
.attend_info {
  margin-left: 20rpx;
}
.attend_info span {
  display: block;
  font-size: 28rpx;
}
.heightauto {
  height: auto !important;
}
.reportform {
  width: 600rpx;
  height: 600rpx;
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 4;
  background: #fff;
  border-radius: 10rpx;
  transform: translateX(-50%) translateY(-50%);
  padding: 20rpx;
}
.reportform_textarea {
  margin-top: 10rpx;
  width: 100%;
  height: 100%;
  font-size: 28rpx;
}
</style>

